css 文本超过两行或者三行隐藏并在后面加上省略号.....

2023-07-06 17:05| 来源: 网络整理| 查看: 265

text-aline: left / right / end / justify / inhertid;

首先解决单行文字要设置两端对齐:

text-aline: justify ;

该设置是无效的! 发现文本还是左对齐

hello world

解决方法:

1 . 在标签内部添加标签

hello world

对其中的 i 标签设置属性

{ display: inline-block; conent: ""; width: 100%; }

添加伪类在html 结构中尽量少添加多余的标签,可以使用伪类达到相同的目的

p{ &::after{ display: inline-block; conent: ""; width: 100%; } }

sass 语法

在实际开发中会遇到文字超过多少行,只是显示固定行数,并且加上省略号,活着加上其他的处理.

超出加上省略号:

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

再加上行数:

-webkit-line-clamp: 3;

## 以上代码可以实现需求,但是在实际开发过程中,特别是在移动端适配过程中会出现很多问题

.text { text-align: justify; line-height: 18px; &.hiddle { @include hiddle(2); // 此处是sass语法等效于两行 + 省略号不懂的正常写就行 } }

在移动端出现结尾三个点点在某些浏览器中与文字重叠;

解决方法:

出现重叠情况下是在,隐藏了多余行,我们可以在隐藏的时候,设置text-aline: left;

点击事件后: 设置text-aline: justify;

就可以完美解决这个问题

在文章开头说的 text-aline: justify 单行问题,在这里不存在,多行出了最后一行都是两端对齐.

优质内容筛选与推荐>>1、Python PyQuery获取shadowsocks免费账号实现"飜牆"2、socket编程（1）简单的TCP/UDP编程3、14、stun简介5、随笔57 sql语句中in与exists，not in与not exists的区别

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

【本文地址】

今日新闻